<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>移动互联网大数据</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8"/>

    <!-- Bootstrap -->
    <link href="/assets/css/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/down/font-awesome.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

    <link rel="stylesheet" href="/assets/css/vendor/animate/animate.min.css">
    <link type="text/css" rel="stylesheet" media="all" href="/assets/js/vendor/mmenu/css/jquery.mmenu.all.css"/>
    <link rel="stylesheet" href="/assets/js/vendor/videobackground/css/jquery.videobackground.css">
    <link rel="stylesheet" href="/assets/css/vendor/bootstrap-checkbox.css">

    <link rel="stylesheet" href="/assets/js/vendor/rickshaw/css/rickshaw.min.css">
    <link rel="stylesheet" href="/assets/js/vendor/morris/css/morris.css">
    <link rel="stylesheet" href="/assets/js/vendor/tabdrop/css/tabdrop.css">
    <link rel="stylesheet" href="/assets/js/vendor/summernote/css/summernote.css">
    <link rel="stylesheet" href="/assets/js/vendor/summernote/css/summernote-bs3.css">
    <link rel="stylesheet" href="/assets/js/vendor/chosen/css/chosen.min.css">
    <link rel="stylesheet" href="/assets/js/vendor/chosen/css/chosen-bootstrap.css">

    <link href="/assets/css/minimal.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/assets/down/html5shiv.js"></script>
    <script src="/assets/down/respond.min.js"></script>
    <![endif]-->

    <script src="/command/echarts/echarts.min.js"></script>
    <script src="/command/echarts/echarts.js"></script>
    <script src="/command/echarts/echarts-gl.js"></script>
    <script src="/command/echarts-wordcloud.min.js"></script>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/assets/down/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/assets/js/vendor/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/mmenu/js/jquery.mmenu.min.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/sparkline/jquery.sparkline.min.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/nicescroll/jquery.nicescroll.min.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/animate-numbers/jquery.animateNumbers.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/videobackground/jquery.videobackground.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/blockui/jquery.blockUI.js"></script>

    <script src="/assets/js/vendor/flot/jquery.flot.min.js"></script>
    <script src="/assets/js/vendor/flot/jquery.flot.time.min.js"></script>
    <script src="/assets/js/vendor/flot/jquery.flot.selection.min.js"></script>
    <script src="/assets/js/vendor/flot/jquery.flot.animator.min.js"></script>
    <script src="/assets/js/vendor/flot/jquery.flot.orderBars.js"></script>
    <script src="/assets/js/vendor/easypiechart/jquery.easypiechart.min.js"></script>

    <script src="/assets/js/vendor/rickshaw/raphael-min.js"></script>
    <script src="/assets/js/vendor/rickshaw/d3.v2.js"></script>
    <script src="/assets/js/vendor/rickshaw/rickshaw.min.js"></script>

    <script src="/assets/js/vendor/morris/morris.min.js"></script>

    <script src="/assets/js/vendor/tabdrop/bootstrap-tabdrop.min.js"></script>

    <script src="/assets/js/vendor/summernote/summernote.min.js"></script>

    <script src="/assets/js/vendor/chosen/chosen.jquery.min.js"></script>

    <script src="/assets/js/minimal.min.js"></script>

    <link rel="stylesheet" href="/rankView/js/tip.css">

</head>
<body class="bg-1">


<!-- Preloader -->
<div class="mask">
    <div id="loader"></div>
</div>
<!--/Preloader -->

<!-- Wrap all page content here -->
<div id="wrap">


    <!-- Make page fluid -->
    <div class="row">


        <!-- Fixed navbar -->
        <div class="navbar navbar-default navbar-fixed-top navbar-transparent-black mm-fixed-top" role="navigation"
             id="navbar">


            <!-- Branding -->
            <div class="navbar-header col-md-2">
                <a class="navbar-brand" href="index.html">
                    <strong>移动互联网</strong>大数据
                </a>
                <div class="sidebar-collapse">
                    <a href="#">
                        <i class="fa fa-bars"></i>
                    </a>
                </div>
            </div>
            <!-- Branding end -->


            <!-- .nav-collapse -->
            <div class="navbar-collapse" id="tobar">

                <!-- Page refresh -->
                <ul class="nav navbar-nav refresh">
                    <li class="divided">
                        <a href="#" class="page-refresh"><i class="fa fa-refresh"></i></a>
                    </li>
                </ul>
                <!-- /Page refresh -->

                <!-- Search -->
                <!--                <div class="search" id="main-search">-->
                <!--                    <i class="fa fa-search"></i> <input type="text" name="oid" id="oid" placeholder="Search...">-->

                <!--                </div>-->
                <!-- Search end -->

                <input type="button" value="通知发送" class="btn btn-blue" id="history" onclick="openWin('sendMessage',610,420);">

                <!-- Quick Actions -->
                <ul class="nav navbar-nav quick-actions">

                    <!--                    <li class="dropdown divided">-->

                    <!--                        <a class="dropdown-toggle button" data-toggle="dropdown" href="#">-->
                    <!--                            <i class="fa fa-tasks"></i>-->
                    <!--                            <span class="label label-transparent-black">2</span>-->
                    <!--                        </a>-->

                    <!--                        <ul class="dropdown-menu wide arrow nopadding bordered">-->
                    <!--                            <li><h1>You have <strong>2</strong> new tasks</h1></li>-->
                    <!--                            <li>-->
                    <!--                                <a href="#">-->
                    <!--                                    <div class="task-info">-->
                    <!--                                        <div class="desc">Layout</div>-->
                    <!--                                        <div class="percent">80%</div>-->
                    <!--                                    </div>-->
                    <!--                                    <div class="progress progress-striped progress-thin">-->
                    <!--                                        <div class="progress-bar progress-bar-green" role="progressbar"-->
                    <!--                                             aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"-->
                    <!--                                             style="width: 80%">-->
                    <!--                                            <span class="sr-only">40% Complete (success)</span>-->
                    <!--                                        </div>-->
                    <!--                                    </div>-->
                    <!--                                </a>-->
                    <!--                            </li>-->
                    <!--                            <li>-->
                    <!--                                <a href="#">-->
                    <!--                                    <div class="task-info">-->
                    <!--                                        <div class="desc">Schemes</div>-->
                    <!--                                        <div class="percent">15%</div>-->
                    <!--                                    </div>-->
                    <!--                                    <div class="progress progress-striped active progress-thin">-->
                    <!--                                        <div class="progress-bar progress-bar-cyan" role="progressbar"-->
                    <!--                                             aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"-->
                    <!--                                             style="width: 15%">-->
                    <!--                                            <span class="sr-only">45% Complete</span>-->
                    <!--                                        </div>-->
                    <!--                                    </div>-->
                    <!--                                </a>-->
                    <!--                            </li>-->
                    <!--                            <li>-->
                    <!--                                <a href="#">-->
                    <!--                                    <div class="task-info">-->
                    <!--                                        <div class="desc">Forms</div>-->
                    <!--                                        <div class="percent">5%</div>-->
                    <!--                                    </div>-->
                    <!--                                    <div class="progress progress-striped progress-thin">-->
                    <!--                                        <div class="progress-bar progress-bar-orange" role="progressbar"-->
                    <!--                                             aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 5%">-->
                    <!--                                            <span class="sr-only">5% Complete (warning)</span>-->
                    <!--                                        </div>-->
                    <!--                                    </div>-->
                    <!--                                </a>-->
                    <!--                            </li>-->
                    <!--                            <li>-->
                    <!--                                <a href="#">-->
                    <!--                                    <div class="task-info">-->
                    <!--                                        <div class="desc">JavaScript</div>-->
                    <!--                                        <div class="percent">30%</div>-->
                    <!--                                    </div>-->
                    <!--                                    <div class="progress progress-striped progress-thin">-->
                    <!--                                        <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="45"-->
                    <!--                                             aria-valuemin="0" aria-valuemax="100" style="width: 30%">-->
                    <!--                                            <span class="sr-only">30% Complete (danger)</span>-->
                    <!--                                        </div>-->
                    <!--                                    </div>-->
                    <!--                                </a>-->
                    <!--                            </li>-->
                    <!--                            <li>-->
                    <!--                                <a href="#">-->
                    <!--                                    <div class="task-info">-->
                    <!--                                        <div class="desc">Dropdowns</div>-->
                    <!--                                        <div class="percent">60%</div>-->
                    <!--                                    </div>-->
                    <!--                                    <div class="progress progress-striped progress-thin">-->
                    <!--                                        <div class="progress-bar progress-bar-amethyst" role="progressbar"-->
                    <!--                                             aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"-->
                    <!--                                             style="width: 60%">-->
                    <!--                                            <span class="sr-only">60% Complete</span>-->
                    <!--                                        </div>-->
                    <!--                                    </div>-->
                    <!--                                </a>-->
                    <!--                            </li>-->
                    <!--                            <li><a href="#">Check all tasks <i class="fa fa-angle-right"></i></a></li>-->
                    <!--                        </ul>-->

                    <!--                    </li>-->

                    <li class="dropdown divided">

                        <a class="dropdown-toggle button" data-toggle="dropdown" href="#">
                            <i class="fa fa-envelope"></i>
                            <span class="label label-transparent-black" id="currmessnum">0</span>
                        </a>

                        <ul class="dropdown-menu wider arrow nopadding messages" id="messagebox">
                            <li>
                                <a class="cyan" href="#">
                                    <div class="profile-photo">
                                        <img src="assets/images/ici-avatar.jpg" alt/>
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">Ing. Imrich Kamarel</span>
                                        <span class="time">12 mins</span>
                                        <div class="message-content">Duis aute irure dolor in reprehenderit in voluptate
                                            velit esse cillum
                                        </div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a class="green" href="#">
                                    <div class="profile-photo">
                                        <img src="assets/images/arnold-avatar.jpg" alt/>
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">Arnold Karlsberg</span>
                                        <span class="time">1 hour</span>
                                        <div class="message-content">Lorem ipsum dolor sit amet, consectetur adipisicing
                                            elit
                                        </div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <div class="profile-photo">
                                        <img src="assets/images/profile-photo.jpg" alt/>
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">John Douey</span>
                                        <span class="time">3 hours</span>
                                        <div class="message-content">Excepteur sint occaecat cupidatat non proident,
                                            sunt in culpa qui officia
                                        </div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a class="red" href="#">
                                    <div class="profile-photo">
                                        <img src="assets/images/peter-avatar.jpg" alt/>
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">Peter Kay</span>
                                        <span class="time">5 hours</span>
                                        <div class="message-content">Ut enim ad minim veniam, quis nostrud
                                            exercitation
                                        </div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a class="orange" href="#">
                                    <div class="profile-photo">
                                        <img src="assets/images/george-avatar.jpg" alt/>
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">George McCain</span>
                                        <span class="time">6 hours</span>
                                        <div class="message-content">Lorem ipsum dolor sit amet, consectetur adipisicing
                                            elit
                                        </div>
                                    </div>
                                </a>
                            </li>


                            <li class="topborder"><a href="#">Check all messages <i class="fa fa-angle-right"></i></a>
                            </li>
                        </ul>

                    </li>

                    <li class="dropdown divided">

                        <a class="dropdown-toggle button" data-toggle="dropdown" href="#">
                            <i class="fa fa-bell"></i>
                            <span class="label label-transparent-black" id="noticeunread">0</span>
                        </a>

                        <ul class="dropdown-menu wide arrow nopadding bordered" id="notice">
                            <li><h1>你收到了 <strong>3</strong> 新通知</h1></li>

                            <li>
                                <a href="#">
                                    <span class="label label-green"><i class="fa fa-user"></i></span>
                                    New user registered.
                                    <span class="small">18 mins</span>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <span class="label label-red"><i class="fa fa-power-off"></i></span>
                                    Server down.
                                    <span class="small">27 mins</span>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <span class="label label-orange"><i class="fa fa-plus"></i></span>
                                    New order.
                                    <span class="small">36 mins</span>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <span class="label label-cyan"><i class="fa fa-power-off"></i></span>
                                    Server restared.
                                    <span class="small">45 mins</span>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <span class="label label-amethyst"><i class="fa fa-power-off"></i></span>
                                    Server started.
                                    <span class="small">50 mins</span>
                                </a>
                            </li>

                            <li><a href="#">Check all notifications <i class="fa fa-angle-right"></i></a></li>
                        </ul>

                    </li>

                    <li class="dropdown divided user" id="current-user">
                        <div id="image" class="profile-photo">

                        </div>
                        <a class="dropdown-toggle options" data-toggle="dropdown" href="#">
                            <span id="username"></span> <i class="fa fa-caret-down"></i>
                        </a>

                        <ul class="dropdown-menu arrow settings">

                            <li>

                                <h3>背景颜色:</h3>
                                <ul id="color-schemes">
                                    <li><a href="javascript:;" class="bg-1" onclick="bgchange(1)"></a></li>
                                    <li><a href="javascript:;" class="bg-2" onclick="bgchange(2)"></a></li>
                                    <li><a href="javascript:;" class="bg-3" onclick="bgchange(3)"></a></li>
                                    <li><a href="javascript:;" class="bg-4" onclick="bgchange(4)"></a></li>
                                    <li><a href="javascript:;" class="bg-5" onclick="bgchange(5)"></a></li>
                                    <li><a href="javascript:;" class="bg-6" onclick="bgchange(6)"></a></li>
                                </ul>

                                <!--                                <div class="form-group videobg-check">-->
                                <!--                                    <label class="col-xs-8 control-label">Video BG</label>-->
                                <!--                                    <div class="col-xs-4 control-label">-->
                                <!--                                        <div class="onoffswitch greensea small">-->
                                <!--                                            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"-->
                                <!--                                                   id="videobg-check">-->
                                <!--                                            <label class="onoffswitch-label" for="videobg-check">-->
                                <!--                                                <span class="onoffswitch-inner"></span>-->
                                <!--                                                <span class="onoffswitch-switch"></span>-->
                                <!--                                            </label>-->
                                <!--                                        </div>-->
                                <!--                                    </div>-->
                                <!--                                </div>-->

                            </li>

                            <li class="divider"></li>

                            <li>
                                <a th:href="@{'/userView'}"><i class="fa fa-user"></i> 个人信息</a>
                            </li>


                            <li>
                                <a href="#"><i class="fa fa-envelope"></i> 未读消息
                                    <span class="badge badge-red"
                                          id="user-inbox">0</span>
                                </a>
                            </li>

                            <li class="divider"></li>

                            <li>
                                <a href="/invalidsession"><i class="fa fa-power-off"></i> 退出</a>
                            </li>
                        </ul>
                    </li>

                    <li>
                        <a href="#mmenu"><i class="fa fa-comments"></i></a>
                    </li>
                </ul>
                <!-- /Quick Actions -->


                <!-- Sidebar -->
                <ul class="nav navbar-nav side-nav" id="sidebar">

                    <li class="collapsed-content">
                        <ul>
                            <li class="search"><!-- Collapsed search pasting here at 768px --></li>
                        </ul>
                    </li>

                    <li class="navigation" id="navigation">
                        <a href="#" class="sidebar-toggle" data-toggle="#navigation">导航 <i
                                class="fa fa-angle-up"></i></a>

                        <ul class="menu">

                            <li class="active">
                                <a href="index">
                                    <i class="fa fa-tachometer"></i> 主页
                                    <!--                                    <span class="badge badge-red">1</span>-->
                                </a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-list"></i> 排行榜 <b class="fa fa-plus dropdown-plus"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a th:href="@{'/appsView'}">
                                            <i class="fa fa-caret-right"></i> 应用程序
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{'/gameView'}">
                                            <i class="fa fa-caret-right"></i> 游戏
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{'/gzhListView'}">
                                            <i class="fa fa-caret-right"></i> 微信公众号
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{'/livenessView'}">
                                            <i class="fa fa-caret-right"></i> 应用活跃度
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{'/overseasView'}">
                                            <i class="fa fa-caret-right"></i> 海外应用
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-desktop"></i> 系统管理 <b class="fa fa-plus dropdown-plus"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a th:href="@{'/userView'}">
                                            <i class="fa fa-caret-right"></i> 查看用户信息
                                        </a>
                                    </li>
                                    <li>
                                        <a href="/sendMessage">
                                            <i class="fa fa-caret-right"></i> 发送通知
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{'/logout'}">
                                            <i class="fa fa-caret-right"></i> 退出登录
                                        </a>
                                    </li>
                                </ul>
                            </li>


                        </ul>

                    </li>

                    <!--                    <li class="summary" id="order-summary">-->
                    <!--                        <a href="#" class="sidebar-toggle underline" data-toggle="#order-summary">Orders Summary <i-->
                    <!--                                class="fa fa-angle-up"></i></a>-->

                    <!--                        <div class="media">-->
                    <!--                            <a class="pull-right" href="#">-->
                    <!--                                <span id="sales-chart"></span>-->
                    <!--                            </a>-->
                    <!--                            <div class="media-body">-->
                    <!--                                This week sales-->
                    <!--                                <h3 class="media-heading">26, 149</h3>-->
                    <!--                            </div>-->
                    <!--                        </div>-->

                    <!--                        <div class="media">-->
                    <!--                            <a class="pull-right" href="#">-->
                    <!--                                <span id="balance-chart"></span>-->
                    <!--                            </a>-->
                    <!--                            <div class="media-body">-->
                    <!--                                This week balance-->
                    <!--                                <h3 class="media-heading">318, 651</h3>-->
                    <!--                            </div>-->
                    <!--                        </div>-->

                    <!--                    </li>-->

                    <!--                    <li class="settings" id="general-settings">-->
                    <!--                        <a href="#" class="sidebar-toggle underline" data-toggle="#general-settings">General Settings <i-->
                    <!--                                class="fa fa-angle-up"></i></a>-->

                    <!--                        <div class="form-group">-->
                    <!--                            <label class="col-xs-8 control-label">Switch ON</label>-->
                    <!--                            <div class="col-xs-4 control-label">-->
                    <!--                                <div class="onoffswitch greensea">-->
                    <!--                                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"-->
                    <!--                                           id="switch-on" checked="">-->
                    <!--                                    <label class="onoffswitch-label" for="switch-on">-->
                    <!--                                        <span class="onoffswitch-inner"></span>-->
                    <!--                                        <span class="onoffswitch-switch"></span>-->
                    <!--                                    </label>-->
                    <!--                                </div>-->
                    <!--                            </div>-->
                    <!--                        </div>-->

                    <!--                        <div class="form-group">-->
                    <!--                            <label class="col-xs-8 control-label">Switch OFF</label>-->
                    <!--                            <div class="col-xs-4 control-label">-->
                    <!--                                <div class="onoffswitch greensea">-->
                    <!--                                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"-->
                    <!--                                           id="switch-off">-->
                    <!--                                    <label class="onoffswitch-label" for="switch-off">-->
                    <!--                                        <span class="onoffswitch-inner"></span>-->
                    <!--                                        <span class="onoffswitch-switch"></span>-->
                    <!--                                    </label>-->
                    <!--                                </div>-->
                    <!--                            </div>-->
                    <!--                        </div>-->

                    <!--                    </li>-->


                </ul>
                <!-- Sidebar end -->


            </div>
            <!--/.nav-collapse -->


        </div>
        <!-- Fixed navbar end -->


        <!-- Page content -->
        <div id="content" class="col-md-12">


            <!-- page header -->
            <!--            <div class="pageheader">-->


            <!--                <h2><i class="fa fa-tachometer"></i> Dashboard-->
            <!--                    <span>// Place subtitle here...</span></h2>-->


            <!--                <div class="breadcrumbs">-->
            <!--                    <ol class="breadcrumb">-->
            <!--                        <li>You are here</li>-->
            <!--                        <li><a href="index.html">Minimal</a></li>-->
            <!--                        <li class="active">Dashboard</li>-->
            <!--                    </ol>-->
            <!--                </div>-->


            <!--            </div>-->
            <!-- /page header -->


            <!-- content main container -->
            <div class="main">
                <div class="row" style="width: 3500px;height: 850px ;">

                    <!--以下oversea-->
                    <!--                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">-->
                    <!--                        <section class="tile color transparent-black textured">-->
                    <!--                            <div class="tile-header">-->
                    <!--                                <h1><strong>Server</strong> Load</h1>-->
                    <!--                                <div class="controls">-->
                    <!--                                    <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>-->
                    <!--                                    <a href="#" class="remove"><i class="fa fa-times"></i></a>-->
                    <!--                                </div>-->
                    <!--                            </div>-->
                    <!--                            <div class="tile-body paddingtop">-->
                    <!--                                <div id = "oversea1" style="height: 200px;"></div>-->
                    <!--                            </div>-->
                    <!--                        </section>-->
                    <!--                    </div>-->

                    <!--                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">-->
                    <!--                        <section class="tile color transparent-black">-->
                    <!--                            <div class="tile-header">-->
                    <!--                                <h1><strong>Browser</strong> Usage</h1>-->
                    <!--                                <div class="controls">-->
                    <!--                                    <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>-->
                    <!--                                    <a href="#" class="remove"><i class="fa fa-times"></i></a>-->
                    <!--                                </div>-->
                    <!--                            </div>-->
                    <!--                            <div class="tile-body">-->
                    <!--                                <div id="oversea2" style="height: 200px;" class="morris-chart"></div>-->
                    <!--                            </div>-->
                    <!--                        </section>-->
                    <!--                    </div>-->

                    <!--liveness-->
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">


                        <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
                            <section class="tile color transparent-black textured">
                                <div class="tile-header">
                                    <h1><strong>公众号数量统计</strong></h1>
                                    <div class="controls">
                                        <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                                        <a href="#" class="remove"><i class="fa fa-times"></i></a>
                                    </div>
                                </div>
                                <div class="tile-body paddingtop">
                                    <div id="gzh1" style="height: 300px;" class="morris-chart"></div>
                                </div>
                            </section>
                        </div>


                        <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                            <section class="tile color transparent-black">
                                <div class="tile-header">
                                    <h1><strong>公众号类别比重</strong></h1>
                                    <div class="controls">
                                        <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                                        <a href="#" class="remove"><i class="fa fa-times"></i></a>
                                    </div>
                                </div>
                                <div class="tile-body">
                                    <div id="gzh2" style="height: 300px;" class="morris-chart"></div>
                                </div>
                            </section>
                        </div>
                        <!--游戏pie图-->
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <section class="tile color transparent-black textured">
                                <div class="tile-header">
                                    <h3><strong>游戏发行商</strong></h3>
                                    <div class="controls">
                                        <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                                        <a href="#" class="remove"><i class="fa fa-times"></i></a>
                                    </div>
                                </div>
                                <div class="tile-body paddingtop">
                                    <div id="game1" style="height: 400px;"></div>
                                </div>
                            </section>
                        </div>

                    </div>
                    <!--第一列-->
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                        <section class="tile color transparent-black textured">
                            <div class="tile-header">
                                <h1><strong>应用标签</strong></h1>
                                <div class="controls">
                                    <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                                    <a href="#" class="remove"><i class="fa fa-times"></i></a>
                                </div>
                            </div>
                            <div class="tile-body paddingtop">
                                <div id="app1" style="height: 800px;"></div>
                            </div>
                        </section>
                    </div>


                    <!--3d-->
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                        <section class="tile color transparent-black">
                            <div class="tile-header">
                                <h3><strong>每个类型前十名游戏评分</strong></h3>
                                <div class="controls">
                                    <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                                    <a href="#" class="remove"><i class="fa fa-times"></i></a>
                                </div>
                            </div>
                            <div class="tile-body">
                                <div id="game2" style="height: 800px;" class="morris-chart"></div>
                            </div>
                        </section>
                    </div>


                    <!--以下第三-->
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">


                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                            <section class="tile color transparent-black textured">
                                <div class="tile-header">
                                    <h3>应用活跃度排名</h3>
                                    <div class="controls">
                                        <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                                        <a href="#" class="remove"><i class="fa fa-times"></i></a>
                                    </div>
                                </div>
                                <div class="tile-body paddingtop">
                                    <div id="liveness1" style="height: 300px;"></div>
                                </div>
                            </section>
                        </div>


                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                            <section class="tile color transparent-black">
                                <div class="tile-header">
                                    <h3>前5大应用占比</h3>
                                    <div class="controls">
                                        <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                                        <a href="#" class="remove"><i class="fa fa-times"></i></a>
                                    </div>
                                </div>
                                <div class="tile-body">
                                    <div id="liveness2" style="height: 300px;" class="morris-chart"></div>
                                </div>
                            </section>
                        </div>


                        <!--开发者数据-->
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <section class="tile color transparent-black">
                                <div class="tile-header">
                                    <h1><strong>开发者数据</strong></h1>
                                    <div class="controls">
                                        <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                                        <a href="#" class="remove"><i class="fa fa-times"></i></a>
                                    </div>
                                </div>
                                <div class="tile-body">
                                    <div id="app2" style="height: 400px;" class="morris-chart"></div>
                                </div>
                            </section>
                        </div>

                    </div>
                    <!--第二列-->


                </div>
                <div class="row">
                    <div class="col-md-6">
                        <section class="tile transparent recent-activity">
                        </section>
                    </div>
                    <div class="col-md-6">
                    </div>
                </div>





            </div>
            <!-- /content container -->


        </div>

        <!-- Page content end -->
        <div style="height:auto; background:#CCC">
            <!--弹出信息 右下角-->
            <div class="tipfloat" data-num="3" style="display: none;">
                <p class="tipfloat_bt">
                    <span class="fl">通知</span>
                    <span class="fr close">关闭</span>
                </p>
                <div class="ranklist">
                    <div class="xx_nrong">2</div>
                </div>
            </div>

        </div>


        <div id="mmenu" class="right-panel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs nav-justified">
                <li class="active"><a href="#mmenu-users" data-toggle="tab"><i class="fa fa-users"></i></a></li>
                <li class="" id="historyMenu"><a href="#mmenu-history" data-toggle="tab"><i
                        class="fa fa-clock-o"></i></a></li>
                <li class=""><a href="#mmenu-friends" data-toggle="tab"><i class="fa fa-heart"></i></a></li>
                <li class=""><a href="#mmenu-settings" data-toggle="tab"><i class="fa fa-gear"></i></a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active" id="mmenu-users">
                    <h5><strong>Online</strong> Users</h5>

                    <ul class="users-list">

                        <li class="online">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/ici-avatar.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Ing. Imrich <strong>Kamarel</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Ulaanbaatar, Mongolia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="online">
                            <div class="media">

                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/arnold-avatar.jpg" alt>
                                </a>
                                <span class="badge badge-red unread">3</span>

                                <div class="media-body">
                                    <h6 class="media-heading">Arnold <strong>Karlsberg</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Bratislava, Slovakia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>

                            </div>
                        </li>

                        <li class="online">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/peter-avatar.jpg" alt>

                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Peter <strong>Kay</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Kosice, Slovakia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="online">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/george-avatar.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">George <strong>McCain</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Prague, Czech Republic</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="busy">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar1.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Lucius <strong>Cashmere</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Wien, Austria</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="busy">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar2.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Jesse <strong>Phoenix</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Berlin, Germany</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                    </ul>

                    <h5><strong>Offline</strong> Users</h5>

                    <ul class="users-list">

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar4.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Dell <strong>MacApple</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Paris, France</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">

                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar5.jpg" alt>
                                </a>

                                <div class="media-body">
                                    <h6 class="media-heading">Roger <strong>Flopple</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Rome, Italia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>

                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar6.jpg" alt>

                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Nico <strong>Vulture</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Kyjev, Ukraine</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar7.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Bobby <strong>Socks</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Moscow, Russia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar8.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Anna <strong>Opichia</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Budapest, Hungary</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                    </ul>

                </div>

                <div class="tab-pane" id="mmenu-history">
                    <h5><strong>Chat</strong> History</h5>

                    <ul class="history-list">

                        <li class="online">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/ici-avatar.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Ing. Imrich <strong>Kamarel</strong></h6>
                                    <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                        tempor</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="busy">
                            <div class="media">

                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/arnold-avatar.jpg" alt>
                                </a>
                                <span class="badge badge-red unread">3</span>

                                <div class="media-body">
                                    <h6 class="media-heading">Arnold <strong>Karlsberg</strong></h6>
                                    <small>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                                        eu fugiat nulla pariatur</small>
                                    <span class="badge badge-outline status"></span>
                                </div>

                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/peter-avatar.jpg" alt>

                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Peter <strong>Kay</strong></h6>
                                    <small>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                                        deserunt mollit </small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                    </ul>

                </div>

                <div class="tab-pane" id="mmenu-friends">
                    <h5><strong>Friends</strong> List</h5>
                    <ul class="favourite-list">

                        <li class="online">
                            <div class="media">

                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/arnold-avatar.jpg" alt>
                                </a>
                                <span class="badge badge-red unread">3</span>

                                <div class="media-body">
                                    <h6 class="media-heading">Arnold <strong>Karlsberg</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Bratislava, Slovakia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>

                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar8.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Anna <strong>Opichia</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Budapest, Hungary</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="busy">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar1.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Lucius <strong>Cashmere</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Wien, Austria</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="online">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/ici-avatar.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Ing. Imrich <strong>Kamarel</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Ulaanbaatar, Mongolia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>

                <div class="tab-pane pane-settings" id="mmenu-settings">
                    <h5><strong>聊天</strong> 设置</h5>

                    <ul class="settings">

                        <li>
                            <div class="form-group">
                                <label class="col-xs-8 control-label">显示离线用户</label>
                                <div class="col-xs-4 control-label">
                                    <div class="onoffswitch greensea">
                                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
                                               id="show-offline">
                                        <label class="onoffswitch-label" for="show-offline">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>


                        <li>
                            <div class="form-group">
                                <label class="col-xs-8 control-label">历史记录启用</label>
                                <div class="col-xs-4 control-label">
                                    <div class="onoffswitch greensea">
                                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
                                               id="show-history">
                                        <label class="onoffswitch-label" for="show-history">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>


                        <li>
                            <div class="form-group">
                                <label class="col-xs-8 control-label">展示未读条数</label>
                                <div class="col-xs-4 control-label">
                                    <div class="onoffswitch greensea">
                                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
                                               id="show-unread">
                                        <label class="onoffswitch-label" for="show-unread">
                                            <span class="onoffswitch-switch"></span>
                                            <span class="onoffswitch-inner"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>

                    </ul>

                </div><!-- tab-pane -->

            </div><!-- tab-content -->
        </div>


    </div>
    <!-- Make page fluid-->


</div>
<!-- Wrap all page content end -->


<section class="videocontent" id="video"></section>

<script>
    function arrayBufferToBase64(buffer) {
        let binary = '';
        let bytes = new Uint8Array(buffer);
        let len = bytes.byteLength;
        for (let i = 0; i < len; i++) {
            binary += String.fromCharCode(bytes[i]);
        }
        return window.btoa(binary);
    }

    //
    function skip() {
        window.location.href = "/userinfo/" + sessionStorage.getItem("uid");
    }

    //显示用户头像
    function showuserpic() {
        let pic = sessionStorage.getItem("pic");
        let img = document.createElement("img");
        img.src = "data:image/jpeg;base64," + pic;
        img.width = 45;
        img.height = 45;
        $("#image").html(img);
        $("#username").text(sessionStorage.getItem("username"));
    }

    // 基于准备好的dom，初始化echarts实例
    let appview1 = echarts.init(document.getElementById('app1'));
    let gameview1 = echarts.init(document.getElementById('game1'));
    let gzhview1 = echarts.init(document.getElementById('gzh1'));
    let liveview1 = echarts.init(document.getElementById('liveness1'));
    // let overseaview1 = echarts.init(document.getElementById('oversea1'));
    let appview2 = echarts.init(document.getElementById('app2'));
    let gameview2 = echarts.init(document.getElementById('game2'));
    let gzhview2 = echarts.init(document.getElementById('gzh2'));
    let liveview2 = echarts.init(document.getElementById('liveness2'));
    // let overseaview2 = echarts.init(document.getElementById('oversea2'));

    let webSocket = null;
    if ("WebSocket" in window) {
        webSocket = new WebSocket("ws://localhost:8080/websocket/" + sessionStorage.getItem("uid") + "&index");
    } else {
        alert("浏览器不支持webSocket！");
    }

    webSocket.onopen = function () {
        console.log("连接成功");
    };
    //刷新div

    let users;
    let unreadmess;
    let historyList;
    let likeList;
    let setting;
    let messagebox;

    webSocket.onmessage = function (event) {
        let obj = JSON.parse(event.data);

        let type = obj.type;
        //登录测试

        //console.log(sessionStorage.getItem(sessionStorage.getItem("username")));
        let tokendata = obj.tokendata;
        //console.log(tokendata);
        for (let i = 0; i < tokendata.length; i++) {
            if (tokendata[i].username === sessionStorage.getItem("username")) {
                if (tokendata[i].token !== sessionStorage.getItem("token")) {
                    alert("用户已在异地登录，请重新登录!");
                    window.location.href = "/login";
                }
            }
        }


        //console.log(type[0].type);
        //以下为各个模块的内容

        switch (type[0].type) {
            case "apps":
                appEc(obj);
                break;
            case "game":
                gameEc(obj);
                break;
            case "gzh":
                gzhEc(obj);
                break;
            case "live":
                liveEc(obj);
                break;
            case "oversea":
                oversea(obj);
                break;
            case "useronline":
                users = obj.useronline;
                //     sessionStorage.removeItem("users");
                //     sessionStorage.setItem("users", JSON.stringify(obj.useronline));
                break;
            case "messageState":
                sessionStorage.removeItem("unreadmess");
                sessionStorage.setItem("unreadmess", JSON.stringify(obj.messageState));
                break;
            case "historyList":
                sessionStorage.removeItem("historyList");
                sessionStorage.setItem("historyList", JSON.stringify(obj.historyList));
                break;
            case "followList":
                sessionStorage.removeItem("likeList");
                sessionStorage.setItem("likeList", JSON.stringify(obj.followList));
                break;
            case "setting":
                sessionStorage.removeItem("setting");
                sessionStorage.setItem("setting", JSON.stringify(obj.setting));
                break;
            case "messageBox":
                sessionStorage.removeItem("messagebox");
                sessionStorage.setItem("messagebox", JSON.stringify(obj.messageBox));
                messagebox = JSON.parse(sessionStorage.getItem("messagebox"));
                if (users != null) {
                    chattingbox(users, messagebox);
                }
                break;
            case "notice":
                console.log(obj.notice);
                tankuan(obj.notice.text);
                break;
            case "noticeList":
                console.log(obj.noticeList);
                getnotice(obj.noticeList);
                break;
        }

        //console.log(obj);


        if ((users != null)
            && (sessionStorage.getItem("unreadmess") != null)
            && (sessionStorage.getItem("historyList") != null)
            && (sessionStorage.getItem("likeList") != null)
            && (sessionStorage.getItem("setting") != null)
            && (sessionStorage.getItem("messagebox") != null)) {
            //users = obj.useronline;
            //let users = JSON.parse(sessionStorage.getItem("users"));
            unreadmess = JSON.parse(sessionStorage.getItem("unreadmess"));
            historyList = JSON.parse(sessionStorage.getItem("historyList"));
            likeList = JSON.parse(sessionStorage.getItem("likeList"));
            setting = JSON.parse(sessionStorage.getItem("setting"));
            messagebox = JSON.parse(sessionStorage.getItem("messagebox"));
            showuser(users, unreadmess, setting);
            chathisory(users, unreadmess, historyList, setting);
            showhistory(setting);
            likeuser(users, unreadmess, likeList, setting);
            chatsetting(setting);
            showuserpic();
            chattingbox(users, messagebox);
        }
    };

    //notice
    function getnotice(notice) {
        let noticeul = document.getElementById("notice");
        noticeul.innerHTML = '';
        let noticelisum = document.createElement("li");
        noticelisum.innerHTML = "<h1>你收到了 <strong>" + notice.length + "</strong> 通知</h1>";
        noticeul.appendChild(noticelisum);
        let noticeunread=document.getElementById("noticeunread");
        noticeunread.innerText=notice.length;
        for(let i in notice) {

            let noticeli = document.createElement("li");
            let noticea = document.createElement("a");
            noticea.innerText = notice[i].text;
            noticea.onclick = '';
            let noticetime = document.createElement("span");
            noticetime.setAttribute("class", "small");
            noticetime.innerText = notice[i].time;
            noticea.appendChild(noticetime);
            noticeli.appendChild(noticea);
            noticeul.appendChild(noticeli);
        }
    }

    //鼠标事件相关
    function ctolike(oid) {
        let status = document.getElementById("s" + oid);
        status.setAttribute("class", "");
        status.setAttribute("style", "position: absolute;right: 0px;top: 0px;");
        status.innerHTML = "<button type=\"button\" class='btn btn-blue'>关注</button>";
        status.onclick = function () {
            dolike(oid);
        }
    }

    function ctostatus(oid) {
        let like = document.getElementById("s" + oid);
        like.innerHTML = '';
        like.setAttribute("class", "badge badge-outline status")
    }

    function dolike(oid) {
        let uid = sessionStorage.getItem("uid")
        $.ajax({
            type: "GET",
            url: "/changeFollow/" + uid + "&" + oid,
            async: false,
            success: function (result) {
            },
            error: function (errorMsg) {
                alert("关注失败");
            }
        });
    }

    //显示在线用户
    function showuser(users, unreadmess, setting) {
        let menuuser = document.getElementById("mmenu-users");
        menuuser.innerHTML = '';
        let title = document.createElement("h5");
        let titlecss = document.createElement("strong");
        let titleoff = document.createElement("h5");
        let titlecssoff = document.createElement("strong");
        let ulonline = document.createElement("ul");
        let uloffline = document.createElement("ul");
        //未读消息个数显示
        let messnum = document.getElementById("currmessnum");

        titlecss.innerText = '在线用户';
        title.appendChild(titlecss);
        titlecssoff.innerText = '离线用户';
        titleoff.appendChild(titlecssoff);
        titleoff.setAttribute("id", "titleoff");
        ulonline.setAttribute("class", "users-list");
        uloffline.setAttribute("class", "users-list");
        uloffline.setAttribute("id", "offlineUl");
        if (setting.offline == 0) {
            titleoff.style.visibility = "hidden";
            uloffline.style.visibility = "hidden";
        }
        for (let i = 0; i < users.length; i++) {
            if (users[i].username != sessionStorage.getItem("username")) {
                if (users[i].online == 1) {
                    let li = document.createElement("li");
                    let media = document.createElement("div");
                    let mediaobject = document.createElement("a");
                    let mediaobjectimg = document.createElement("img");
                    let mediabody = document.createElement("div");
                    let username = document.createElement("h6");
                    let email = document.createElement("small");
                    let userstatus = document.createElement("span");
                    let userinbox = document.getElementById("user-inbox")
                    li.setAttribute("class", "online");
                    //显示跳转or添加
                    li.onmouseenter = function () {
                        ctolike(users[i].id);
                    }
                    li.onmouseleave = function () {
                        ctostatus(users[i].id);
                    }
                    media.setAttribute("class", "media");
                    mediaobject.setAttribute("class", "pull-left profile-photo");

                    mediaobject.onclick = function () {
                        openchatting(users[i].id, 520, 650);
                    };
                    mediaobjectimg.setAttribute("class", "media-object");
                    mediaobjectimg.src = "data:image/jpeg;base64," + arrayBufferToBase64(users[i].pic);
                    mediabody.setAttribute("class", "media-body");
                    username.setAttribute("class", "media-heading");
                    username.innerText = users[i].username;
                    email.innerText = users[i].email;
                    userstatus.setAttribute("class", "badge badge-outline status");
                    userstatus.setAttribute("id", "s" + users[i].id);
                    mediabody.appendChild(username);
                    mediabody.appendChild(email);
                    mediabody.appendChild(userstatus);
                    mediaobject.appendChild(mediaobjectimg);
                    media.appendChild(mediaobject);
                    //消息未读提示,及未读消息个数
                    let totalmessnum = 0;
                    for (let j = 0; j < unreadmess.length; j++) {
                        totalmessnum = totalmessnum + unreadmess[j].count;
                        if (users[i].id == unreadmess[j].fromId) {
                            let mediamess = document.createElement("span");
                            mediamess.setAttribute("class", "badge badge-red unread");
                            mediamess.setAttribute("name", "redunread");
                            if (setting.unread == 0) {
                                mediamess.style.visibility = "hidden";
                            }
                            if (setting.unread == 1) {
                                mediamess.style.visibility = "visible";
                            }
                            mediamess.innerText = unreadmess[j].count;
                            media.appendChild(mediamess);
                        }
                    }
                    userinbox.innerText = totalmessnum;
                    messnum.innerText = totalmessnum;//未读个数
                    media.appendChild(mediabody);
                    li.appendChild(media);
                    ulonline.appendChild(li);
                }
                if (users[i].online == 0) {
                    let li = document.createElement("li");
                    let media = document.createElement("div");
                    let mediaobject = document.createElement("a");
                    let mediaobjectimg = document.createElement("img");
                    let mediabody = document.createElement("div");
                    let username = document.createElement("h6");
                    let email = document.createElement("small");
                    let userstatus = document.createElement("span");
                    li.setAttribute("class", "offline");
                    li.onmouseenter = function () {
                        ctolike(users[i].id);
                    }
                    li.onmouseleave = function () {
                        ctostatus(users[i].id);
                    }
                    media.setAttribute("class", "media");
                    mediaobject.setAttribute("class", "pull-left profile-photo");
                    mediaobject.onclick = function () {
                        openchatting(users[i].id, 520, 650)
                    };
                    mediaobjectimg.setAttribute("class", "media-object");
                    mediaobjectimg.src = "data:image/jpeg;base64," + arrayBufferToBase64(users[i].pic);
                    mediabody.setAttribute("class", "media-body");
                    username.setAttribute("class", "media-heading");
                    username.innerText = users[i].username;
                    email.innerText = users[i].email;
                    userstatus.setAttribute("class", "badge badge-outline status");
                    userstatus.setAttribute("id", "s" + users[i].id);
                    mediabody.appendChild(username);
                    mediabody.appendChild(email);
                    mediabody.appendChild(userstatus);
                    mediaobject.appendChild(mediaobjectimg);
                    media.appendChild(mediaobject);
                    if (setting.unread == 1) {
                        for (let j = 0; j < unreadmess.length; j++) {
                            if (users[i].id == unreadmess[j].fromId) {
                                let mediamess = document.createElement("span");
                                mediamess.setAttribute("name", "redunread");
                                mediamess.setAttribute("class", "badge badge-red unread");
                                mediamess.innerText = unreadmess[j].count;
                                media.appendChild(mediamess);
                            }
                        }
                    }
                    media.appendChild(mediabody);
                    li.appendChild(media);
                    uloffline.appendChild(li);
                }
            } else {
                sessionStorage.removeItem("pic");
                sessionStorage.setItem("pic", arrayBufferToBase64(users[i].pic))
            }
        }

        menuuser.appendChild(title);
        menuuser.appendChild(ulonline);
        menuuser.appendChild(titleoff);
        menuuser.appendChild(uloffline);
    }

    //显示聊天历史记录
    function chathisory(users, unreadmess, historyList, setting) {
        let menuhistory = document.getElementById("mmenu-history");
        let chathitorybar = document.createElement("h5");
        let historyul = document.createElement("ul");
        chathitorybar.innerText = "聊天历史";
        historyul.setAttribute("class", "history-list");
        for (let i = 0; i < historyList.length; i++) {
            for (let j = 0; j < users.length; j++) {
                if (historyList[i].uid == users[j].id) {
                    let historyli = document.createElement("li");
                    let historydiv = document.createElement("div");
                    let historya = document.createElement("a");
                    let historyimg = document.createElement("img");
                    let historymediabody = document.createElement("div");
                    let historyname = document.createElement("h6");
                    let historymess = document.createElement("small");
                    let historystatus = document.createElement("span");
                    historydiv.setAttribute("class", "media");
                    historya.setAttribute("class", "pull-left profile-photo");
                    historya.onclick = function () {
                        openchatting(users[j].id, 520, 650);
                    };
                    historyimg.setAttribute("class", "media-object");
                    historyimg.src = "data:image/jpeg;base64," + arrayBufferToBase64(users[j].pic);
                    historymediabody.setAttribute("class", "media-body");
                    historyname.setAttribute("class", "media-heading");
                    historyname.innerText = users[j].username;
                    historymess.innerText = historyList[i].text;
                    historystatus.setAttribute("class", "badge badge-outline status")
                    if (users[j].online == 1) {
                        historyli.setAttribute("class", "online");
                    } else {
                        historyli.setAttribute("class", "offline");
                    }
                    historymediabody.appendChild(historyname);
                    historymediabody.appendChild(historymess);
                    historymediabody.appendChild(historystatus);
                    historya.appendChild(historyimg);
                    if (setting.unread == 1) {
                        for (let z = 0; z < unreadmess.length; z++) {
                            if (historyList[i].uid == unreadmess[z].fromId) {
                                let mediamess = document.createElement("span");
                                mediamess.setAttribute("class", "badge badge-red unread");
                                mediamess.setAttribute("name", "redunread");
                                mediamess.innerText = unreadmess[z].count;
                                historydiv.appendChild(mediamess);
                            }
                        }
                    }
                    historydiv.appendChild(historya);
                    historydiv.appendChild(historymediabody);
                    historyli.appendChild(historydiv);
                    historyul.appendChild(historyli);
                }
            }
        }
        menuhistory.innerHTML = '';
        menuhistory.appendChild(chathitorybar);
        menuhistory.appendChild(historyul);

    }

    //关注页面
    function likeuser(users, unreadmess, likeList, setting) {
        let menulike = document.getElementById("mmenu-friends");
        let likebar = document.createElement("h5");
        let likeul = document.createElement("ul");
        likebar.innerText = "关注列表";
        likeul.setAttribute("class", "favourite-list");
        for (let i = 0; i < likeList.length; i++) {
            for (let j = 0; j < users.length; j++) {
                if (likeList[i].uid == users[j].id) {
                    let likeli = document.createElement("li");
                    let likediv = document.createElement("div");
                    let likea = document.createElement("a");
                    let likeimg = document.createElement("img");
                    let likemediabody = document.createElement("div");
                    let likename = document.createElement("h6");
                    let likemess = document.createElement("small");
                    let likestatus = document.createElement("span");
                    likediv.setAttribute("class", "media");
                    likea.setAttribute("class", "pull-left profile-photo");
                    likea.onclick = function () {
                        openchatting(users[j].id, 520, 650);
                    };
                    likeimg.setAttribute("class", "media-object");
                    likeimg.src = "data:image/jpeg;base64," + arrayBufferToBase64(users[j].pic);
                    likemediabody.setAttribute("class", "media-body");
                    likename.setAttribute("class", "media-heading");
                    likename.innerText = users[j].username;
                    likemess.innerText = users[j].email;
                    likestatus.setAttribute("class", "badge badge-outline status")
                    if (users[j].online == 1) {
                        likeli.setAttribute("class", "online");
                    } else {
                        likeli.setAttribute("class", "offline");
                    }
                    likemediabody.appendChild(likename);
                    likemediabody.appendChild(likemess);
                    likemediabody.appendChild(likestatus);
                    likea.appendChild(likeimg);
                    if (setting.unread == 1) {
                        for (let z = 0; z < unreadmess.length; z++) {
                            if (likeList[i].uid == unreadmess[z].fromId) {
                                let mediamess = document.createElement("span");
                                mediamess.setAttribute("class", "badge badge-red unread");
                                mediamess.setAttribute("name", "redunread");
                                mediamess.innerText = unreadmess[z].count;
                                likediv.appendChild(mediamess);
                            }
                        }
                    }
                    likediv.appendChild(likea);
                    likediv.appendChild(likemediabody);
                    likeli.appendChild(likediv);
                    likeul.appendChild(likeli);
                }
            }
        }
        menulike.innerHTML = '';
        menulike.appendChild(likebar);
        menulike.appendChild(likeul);
    }

    //设置相关
    function chatsetting(setting) {
        let showoffline = document.getElementById("show-offline");
        let showhistory = document.getElementById("show-history");
        let showunread = document.getElementById("show-unread");

        showoffline.onclick = function () {
            changesetting("offline");
            if (setting.offline == 1) {
                setting.offline = 0;
                document.getElementById("offlineUl").style.visibility = "hidden";
                document.getElementById("titleoff").style.visibility = "hidden";
            } else {
                setting.offline = 1;
                document.getElementById("offlineUl").style.visibility = "visible";
                document.getElementById("titleoff").style.visibility = "visible";
            }
        }
        showhistory.onclick = function () {
            changesetting("history");
            if (setting.history == 0) {
                setting.history = 1;
                document.getElementById("historyMenu").style.visibility = "visible";
            } else {
                setting.history = 0;
                document.getElementById("historyMenu").style.visibility = "hidden";
            }
        }
        showunread.onclick = function () {
            changesetting("unread");
            if (setting.unread == 0) {
                setting.unread = 1;
                let list = document.getElementsByName("redunread");
                for (i in list) {
                    list[i].style = "visibility:visible";
                }
            } else {
                setting.unread = 0;
                let list = document.getElementsByName("redunread")
                for (i in list) {
                    list[i].style = "visibility:hidden";
                }
            }
        }

        if (setting.offline == 1) {
            showoffline.checked = true;
        } else {
            showoffline.checked = false;
        }

        if (setting.history == 1) {
            showhistory.checked = true;
        } else {
            showhistory.checked = false;
        }

        if (setting.unread == 1) {
            showunread.checked = true;
        } else {
            showunread.checked = false;
        }
    }

    function changesetting(settingtype) {
        let uid = sessionStorage.getItem("uid")
        $.ajax({
            type: "GET",
            url: "/changeSetting/" + uid + "&" + settingtype,
            async: false,
            success: function (result) {
                console.log(settingtype + "更改");
            },
            error: function (errorMsg) {
                alert("设置失败");
            }
        });
    }

    function showhistory(setting) {
        if (setting.history == 0) {
            // let tab = document.getElementById("mm-m0-p0");
            // let lilist = tab.querySelectorAll("li");
            // if (lilist.length==4) {
            //     lilist[1].remove();
            // }
            document.getElementById("historyMenu").style.visibility = "hidden";
        } else {
            document.getElementById("historyMenu").style.visibility = "visible";
        }
    }

    //消息盒子
    function chattingbox(users, messagebox) {
        let messageboxul = document.getElementById("messagebox");
        //设置背景颜色
        let bgmap = {};
        bgmap[0] = "orange";
        bgmap[1] = "green";
        bgmap[2] = "cyan";
        bgmap[3] = "red";
        bgmap[4] = "orange";
        messageboxul.innerHTML = '';
        messageboxul.setAttribute("class", "dropdown-menu wider arrow nopadding messages");
        for (let i = 0; i < messagebox.length; i++) {
            for (let j = 0; j < users.length; j++) {
                if (messagebox[i].id == users[j].id) {
                    let messageboxli = document.createElement("li");
                    let messageboxa = document.createElement("a");
                    messageboxa.setAttribute("class", bgmap[i]);
                    //点击事件
                    messageboxa.onclick = function () {
                        openchatting(users[j].id, 520, 650);
                    };
                    let messageboxdivimg = document.createElement("div");
                    messageboxdivimg.setAttribute("class", "profile-photo");
                    let messageboximg = document.createElement("img");
                    //添加头像
                    messageboximg.src = "data:image/jpeg;base64," + arrayBufferToBase64(users[j].pic);
                    let messageboxdivmessinfo = document.createElement("div");
                    messageboxdivmessinfo.setAttribute("class", "message-info");
                    //发送者
                    let messageboxusername = document.createElement("span");
                    messageboxusername.setAttribute("class", "sender");
                    messageboxusername.innerText = users[j].username;
                    //消息时间
                    let messageboxmesstime = document.createElement("span");
                    messageboxmesstime.setAttribute("class", "time");
                    messageboxmesstime.innerText = formatDate(messagebox[i].time) + " 前";
                    //消息内容
                    let messageboxmesscontent = document.createElement("div");
                    messageboxmesscontent.setAttribute("class", "message-content");
                    messageboxmesscontent.innerText = messagebox[i].text;
                    messageboxdivmessinfo.appendChild(messageboxusername);
                    messageboxdivmessinfo.appendChild(messageboxmesstime);
                    messageboxdivmessinfo.appendChild(messageboxmesscontent);
                    messageboxdivimg.appendChild(messageboximg);
                    messageboxa.appendChild(messageboxdivimg);
                    messageboxa.appendChild(messageboxdivmessinfo);
                    messageboxli.appendChild(messageboxa);
                    messageboxul.appendChild(messageboxli);
                }
            }
        }

    }

    function formatDate(date, format) {
        if (!date) return;
        if (!format) format = "HH:mm:ss";
        switch (typeof date) {
            case "string":
                date = new Date(date.replace(/-/, "/"));
                break;
            case "number":
                date = new Date(date);
                break;
        }
        if (!date instanceof Date) return;
        var dict = {
            "yyyy": date.getFullYear(),
            "M": date.getMonth() + 1,
            "d": date.getDate(),
            "H": date.getHours(),
            "m": date.getMinutes(),
            "s": date.getSeconds(),
            "MM": ("" + (date.getMonth() + 101)).substr(1),
            "dd": ("" + (date.getDate() + 100)).substr(1),
            "HH": ("" + (date.getHours() + 92)).substr(1),
            "mm": ("" + (date.getMinutes() + 100)).substr(1),
            "ss": ("" + (date.getSeconds() + 100)).substr(1)
        };
        return format.replace(/(yyyy|MM?|dd?|HH?|ss?|mm?)/g, function () {
            return dict[arguments[0]];
        });
    }

    function appEc(obj) {
        //app1

        let tagsData = obj.app1;

        let appoption1 = {
            tooltip: {
                show: true
            },
            series: [{
                type: "wordCloud",
                gridSize: 6,
                shape: 'diamond',
                sizeRange: [12, 50],
                width: 800,
                height: 500,
                textStyle: {
                    normal: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160)
                            ].join(',') + ')';
                        }
                    },
                    emphasis: {
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                data: tagsData
            }]
        };

        //app2

        let appData2 = {
            name: [],
            timeData: [],
            scorenum: [],
            follow: [],
            downloads: [],
            appnum: [],
            score: []
        };

        let appobj2 = obj.app2;

        for (let i = 0; i < appobj2.length; i++) {
            appData2.name.push(appobj2[i].name);
            appData2.timeData.push(i);
            appData2.scorenum.push(appobj2[i].scorenum);
            appData2.follow.push(appobj2[i].follow);
            appData2.downloads.push(appobj2[i].downloads);
            appData2.appnum.push(appobj2[i].appnum);
            appData2.score.push(appobj2[i].score);
        }

        let colors = ['#FF6863', '#6EAB40', '#3BB5F5'];

        let appoption2 = {
            color: colors,
            tooltip: {
                trigger: 'axis',
                axisPointer: {type: 'cross'},
                formatter: function (params, ticket, callback) {
                    let index = params[0].dataIndex;
                    let Htm = `${appData2.name[index]}<br>
                    下载量:${appData2.downloads[index]}万<br>
                    应用数:${appData2.appnum[index]}个<br>
                    评分人数:${appData2.follow[index]}<br>
                    平均评分:${appData2.score[index]}`
                    return Htm;
                }
            },
            grid: {
                top: '20%',
                bottom: '30%',
                left: '14%',
                right: '8%'
            },
            dataZoom: {
                bottom: '14%',
                height: '30',
                dataBackground: {
                    lineStyle: {color: '#39977D'},
                    areaStyle: {color: 'rgba(57,151,125,1)'}
                },
                borderColor: 'rgba(57,151,125,0.2)',
                textStyle: {color: '#39977D'},
                start: 0,
                end: 100,
                xAxisIndex: [0, 1, 2, 3]
            },
            xAxis: [{
                name: '总关注',
                type: 'category',
                position: 'bottom',
                offset: 8,
                axisTick: {show: false},
                axisLine: {show: false},
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#000000',
                        fontSize: 14,
                        backgroundColor: '#FFE282',
                        lineHeight: 20,
                        padding: [3, 3]
                    },
                    interval: 0
                },
                nameTextStyle: {color: '#585858', padding: [0, 0, -100]},
                nameLocation: 'start',
                data: appData2.follow
            },
                {
                    name: '评分人数',
                    type: 'category',
                    position: 'bottom',
                    offset: 40,
                    axisTick: {show: false},
                    axisLine: {show: false},

                    nameTextStyle: {color: '#585858', padding: [0, 0, -38]},
                    nameLocation: 'start',
                    data: appData2.scorenum
                },
                {
                    type: 'category',
                    axisLine: {show: false},
                },
                {
                    type: 'category',
                    position: 'bottom',
                    offset: 80,
                    axisTick: {alignWithLabel: true, textStyle: {color: '#707070'}},
                    data: appData2.timeData
                }
            ],
            yAxis: [{
                type: 'value',
                name: '下载量',
                scale: true,
                position: 'left',
                offset: 54,
                axisTick: {lineStyle: {color: colors[0]}, inside: true},
                nameTextStyle: {color: colors[0]},
                axisLabel: {color: colors[0]},
                splitLine: {show: false}
            },
                {
                    type: 'value',
                    name: '应用数',
                    position: 'left',
                    axisTick: {lineStyle: {color: colors[1]}, inside: true},
                    nameTextStyle: {color: colors[1]},
                    axisLabel: {color: colors[1]},
                    splitLine: {show: false}
                },
                {
                    type: 'value',
                    name: '平均评分',
                    scale: true,
                    position: 'right',
                    axisTick: {lineStyle: {color: colors[2]}, inside: true},
                    nameTextStyle: {color: colors[2]},
                    axisLabel: {color: colors[2]},
                    splitLine: {show: false}
                }
            ],
            series: [{
                name: '下载量',
                type: 'line',
                step: false,
                label: {normal: {show: true, position: 'top'}},
                data: appData2.downloads
            },
                {
                    name: '应用数',
                    type: 'bar',
                    yAxisIndex: 1,
                    color: '#bee6b2',
                    barWidth: '50%',
                    label: {normal: {show: true, position: 'top'}},
                    data: appData2.appnum
                },
                {
                    name: '平均评分',
                    type: 'line',
                    step: false,
                    yAxisIndex: 2,
                    color: colors[2],
                    label: {normal: {show: true, position: 'top'}},
                    data: appData2.score
                }
            ]
        };


        appview1.setOption(appoption1);
        appview2.setOption(appoption2);
    }

    function gameEc(obj) {
//game1
        let aname = [];
        let anum = [];
        let gameauobj = obj.gameauthor;
        for (let i = 0; i < gameauobj.length; i++) {
            aname.push(gameauobj[i].name);
            anum.push(gameauobj[i].value);
        }
        let gameoption1 = {
            //backgroundColor:"#FFFFFF",
            color: ["#C33531", "#EFE42A", "#64BD3D", "#EE9201", "#29AAE3", "#B74AE5", "#0AAF9F", "#E89589", "#16A085", "#4A235A"],
            grid: {
                margin_top: '10%',
                bottom: '10%',
                margin_left: '10%',
                right: '50%',
                containLabel: false
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                type: "scroll",
                orient: "vartical",
                // x: "right",
                top: "center",
                right: "15",
                // bottom: "0%",
                itemWidth: 16,
                itemHeight: 8,
                itemGap: 16,
                textStyle: {
                    color: '#A3E2F4',
                    fontSize: 12,
                    fontWeight: 0
                },
                data: aname
            },
            polar: {},
            angleAxis: {
                interval: 1,
                type: 'category',
                data: [],
                z: 10,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#FFFFFF",
                        width: 1,
                        type: "solid"
                    },
                },
                axisLabel: {
                    interval: 0,
                    show: true,
                    color: "#FFFFFF",
                    margin: 8,
                    fontSize: 16
                },
            },
            radiusAxis: {
                min: 40,
                max: 120,
                interval: 20,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#FFFFFF",
                        width: 1,
                        type: "solid"
                    },
                },
                axisLabel: {
                    formatter: '{value} %',
                    show: false,
                    padding: [0, 0, 20, 0],
                    color: "#FFFFFF",
                    fontSize: 16
                },
                splitLine: {
                    lineStyle: {
                        color: "#FFFFFF",
                        width: 2,
                        type: "solid"
                    }
                }
            },
            calculable: true,
            series: [{
                type: 'pie',
                radius: ["5%", "10%"],
                hoverAnimation: false,
                labelLine: {
                    normal: {
                        show: false,
                        length: 30,
                        length2: 55
                    },
                    emphasis: {
                        show: false
                    }
                },
                data: [{
                    name: '',
                    value: 0,
                    itemStyle: {
                        normal: {
                            color: "#FFFFFF"
                        }
                    }
                }]
            }, {
                type: 'pie',
                radius: ["90%", "95%"],
                hoverAnimation: false,
                labelLine: {
                    normal: {
                        show: false,
                        length: 30,
                        length2: 55
                    },
                    emphasis: {
                        show: false
                    }
                },
                name: "",
                data: [{
                    name: '',
                    value: 0,
                    itemStyle: {
                        normal: {
                            color: "#FFFFFF"
                        }
                    }
                }]
            }, {
                stack: 'a',
                type: 'pie',
                radius: ['20%', '80%'],
                roseType: 'area',
                zlevel: 10,
                label: {
                    normal: {
                        show: true,
                        formatter: "{c}",
                        textStyle: {
                            fontSize: 12,
                        },
                        position: 'outside'
                    },
                    emphasis: {
                        show: true
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        length: 20,
                        length2: 55
                    },
                    emphasis: {
                        show: false
                    }
                },
                data: gameauobj
            },]
        };


        //game2
        let scores = [];
        let gamedata = [];
        let gametypeobj = obj.gametypes;
        for (let i = 0; i < gametypeobj.length; i++) {
            scores.push(gametypeobj[i].score);
        }

        for (let i = 0; i < 3; i++) {
            for (let j = 0; j < 10; j++) {
                let array = [];
                array.push(i);
                array.push(j);
                array.push(scores[i * 10 + j]);
                gamedata.push(array);
            }
        }


        let hours = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
        let days = ['动作', '角色扮演', '策略'];
        let gameoption2 = {
            background: '#000000',
            tooltip: {},
            visualMap: {
                max: 20,
                inRange: {
                    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                }
            },
            xAxis3D: {
                type: 'category',
                data: hours
            },
            yAxis3D: {
                type: 'category',
                data: days
            },
            zAxis3D: {
                type: 'value'
            },
            grid3D: {
                boxWidth: 200,
                boxDepth: 80,
                light: {
                    main: {
                        intensity: 1.2
                    },
                    ambient: {
                        intensity: 0.3
                    }
                }
            },
            series: [{
                name: 'game',
                type: 'bar3D',
                data: gamedata.map(function (item) {
                    return {
                        value: [item[1], item[0], item[2]]
                    }
                }),
                shading: 'color',

                label: {
                    show: false,
                    textStyle: {
                        fontSize: 16,
                        borderWidth: 1
                    }
                },

                itemStyle: {
                    opacity: 0.4
                },

                emphasis: {
                    label: {
                        textStyle: {
                            fontSize: 20,
                            color: '#900'
                        }
                    },
                    itemStyle: {
                        color: '#900'
                    }
                }
            }]
        };

        gameview1.setOption(gameoption1);
        gameview2.setOption(gameoption2);
    }

    function gzhEc(obj) {
        //gzh1
        let gzhName = [];
        let gzhnumber = [];
        let gzhobj = obj.gzh;
        for (let i = 0; i < gzhobj.length; i++) {
            gzhName.push(gzhobj[i].name);
            gzhnumber.push(gzhobj[i].value);
        }
        let gzhoption1 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'none'
                },
                formatter: function (params) {
                    return params[0].name + ': ' + params[0].value;
                }
            },
            xAxis: {
                data: gzhName,
                axisTick: {show: false},
                axisLine: {show: false},
                axisLabel: {
                    color: '#e54035'
                }
            },
            yAxis: {
                splitLine: {show: false},
                axisTick: {show: false},
                axisLine: {show: false},
                axisLabel: {show: false}
            },
            color: ['#e54035'],
            series: [{
                name: 'hill',
                type: 'pictorialBar',
                barCategoryGap: '-130%',
                // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
                symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                itemStyle: {
                    opacity: 0.5
                },
                emphasis: {
                    itemStyle: {
                        opacity: 1
                    }
                },
                data: gzhnumber,
                z: 10
            }]
        };

        //gzh2
        var rich = {
            white: {
                color: '#ddd',
                align: 'center',
                padding: [5, 0]
            }
        };
        var placeHolderStyle = {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
            }
        };
        var hdata = [];
        for (var i = 0; i < gzhName.length; i++) {
            hdata.push({
                value: gzhnumber[i],
                name: gzhName[i],
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        shadowBlur: 30,
                        borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                            offset: 0,
                            color: '#7777eb'
                        }, {
                            offset: 1,
                            color: '#70ffac'
                        }]),
                        shadowColor: 'rgba(142, 152, 241, 0.6)'
                    }
                }
            }, {
                value: 1,
                name: '',
                itemStyle: placeHolderStyle
            });
        }
        var seriesObj = [{
            name: '',
            type: 'pie',
            clockWise: false,
            radius: [30, 80],
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'outside',
                        color: '#ddd',
                        formatter: function (params) {
                            var percent = 0;
                            var total = 0;
                            for (var j = 0; j < gzhnumber.length; j++) {
                                total += gzhnumber[j];
                            }
                            percent = ((params.value / total) * 100).toFixed(0);
                            if (params.name !== '') {
                                return params.name + '\n{white|' + '占比' + percent + '%}';
                            } else {
                                return '';
                            }
                        },
                        rich: rich
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            data: hdata
        }];
        let gzhoption2 = {
            tooltip: {
                show: false
            },
            legend: {
                show: false
            },
            toolbox: {
                show: false
            },
            series: seriesObj
        };
        gzhview1.setOption(gzhoption1);
        gzhview2.setOption(gzhoption2);
    }

    function liveEc(obj) {
        //liveness1
        let App = [];
        let Mindex = [];
        let liveobj = obj.liveness1;
        for (let i = 0; i < liveobj.length; i++) {
            App.push(liveobj[i].App);
            Mindex.push(liveobj[i].Mindex);
        }
        // 指定图表的配置项和数据
        let liveoption1 = {
            xAxis: {
                type: 'category',
                data: App
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: Mindex,
                type: 'bar'
            }]
        };

        //liveness2
        let appname = [];
        let echartData = [];
        let liveobj2 = obj.liveness2;
        for (let i = 0; i < liveobj2.length; i++) {
            appname.push(liveobj2[i].App);
            echartData.push(liveobj2[i].Mindex);
        }
        let liveoption2 = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: appname
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: echartData
                }
            ]
        };
        liveview1.setOption(liveoption1);
        liveview2.setOption(liveoption2);
    }

    function oversea(obj) {
//oversea1
        // let appname = [];
        // let clickperday= [];
        // let overseaobj=obj.oversea;
        // for (let i=0;i<overseaobj.length;i++){
        //     appname.push(overseaobj[i].appname);
        //     clickperday.push(overseaobj[i].clickperday);
        // }
        // // 指定图表的配置项和数据
        // let overseaoption1 = {
        //     title: {
        //         text: '海外应用日活'
        //     },
        //     tooltip: {},
        //     legend: {
        //         data:['']
        //     },
        //     xAxis: {
        //         data: appname
        //     },
        //     yAxis: {},
        //     series: [{
        //         name: '日指数',
        //         type: 'bar',
        //         data: clickperday
        //     }]
        // };

        //oversea2


        // 使用刚指定的配置项和数据显示图表。
        // overseaview1.setOption(overseaoption1);
        // overseaview2.setOption(overseaoption2);
    }


    //关闭按钮调用函数
    function clo() {
        webSocket.close(3000, "强制关闭");
    }


    window.onbeforeunload = function () {
        clo();
    };


</script>
<script>
    function openWin(name, iWidth, iHeight) {
        let url = name;
        //获得窗口的垂直位置
        var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
        //获得窗口的水平位置
        var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
        window.open(url, "", 'height=' + iHeight + ',innerHeight=' + iHeight +
            ', width = ' + iWidth + ', innerWidth = ' + iWidth + ', top = ' + iTop + ', left = ' + iLeft +
            ', status = no, toolbar = no, menubar = no, location = no, resizable = no, scrollbars = 0, titlebar = no');
    }

    function openchatting(oid, iWidth, iHeight) {
        let url = "chat1/" + sessionStorage.getItem("uid") + '&' + oid;
        //获得窗口的垂直位置
        let iTop = (window.screen.availHeight - 30 - iHeight) / 2;
        //获得窗口的水平位置
        let iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
        window.open(url, "", 'height=' + iHeight + ',innerHeight=' + iHeight +
            ', width = ' + iWidth + ', innerWidth = ' + iWidth + ', top = ' + iTop + ', left = ' + iLeft +
            ', status = no, toolbar = no, menubar = no, location = no, resizable = no, scrollbars = 0, titlebar = no');
    }
</script>
<script>
    document.body.setAttribute("class", "bg-" + sessionStorage.getItem("bg"));

    function bgchange(bg) {
        let uid = parseInt(sessionStorage.getItem("uid"));
        $.ajax({
            type: "GET",
            url: "/bgchange/" + uid + "&" + bg,
            async: false,
            success: function (result) {
                sessionStorage.setItem("bg", bg);
            },
            error: function (errorMsg) {
                alert("修改失败");
            }
        });
    }
</script>


<script>
    // let tk_index = 0;
    // let xx_num;

    $(".close").click(function () {
        $(".tipfloat").animate({height: "hide"}, 800);
    });

    function tankuan(tk_index) {
        $(".tipfloat").animate({height: "show"}, 800);

        //文本输出可删除
        $(".xx_nrong").html(tk_index);
        // tk_index++;
    }

</script>


</body>
</html>